<template>
  <div class="page-wrapper" style="background-color: whitesmoke;width: 85%;height:90%;position: absolute;margin-top: 50px">
    <div class="content">
      <div class="paper-main">
        <div class="paper-header">
          <el-form label-position="top" label-width="100px" :model="tempDataSource" style="padding-top:0px; ">
            <el-row>
              <el-col :span="4" :offset="1">
                <el-form-item label="试卷">
                  {{dataSource.paperName}}
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="考生" v-if="type!==3">
                  {{dataSource.examineName}}
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="分数" v-if="this.type===2">
                  {{dataSource.score}}
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="考试时长">
                  {{dataSource.examDuration}}分
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="this.type===1">
                <el-form-item label="倒计时间">
                  <span class="downTime">{{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}}</span>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="交卷时间" v-if="this.type===2 || this.type===3">
                  {{dataSource.submissionTime}}
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
        <div ref="paperLeft" class="paper-left">
          <div class="paper-title">
            <h1><i class="el-icon-s-grid"></i>答题卡</h1>
          </div>
          <el-collapse v-model="answerCardActiveName">
            <el-collapse-item v-for="item in convertDatas"  :title="item.name" :name="item.code" >
              <h2 style="text-align: center">{{item.name}}</h2><p></p>
              <el-button  class="answer-button"  size="small" v-for="index of item.count" :id="'answer'+item.code+index"  @click.native="jump(item.code+index)">{{index}}</el-button>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div ref="paperContent" class="paper-content">
          <div class="subject" v-for="item in convertDatas">
            <div class="subject-title" >
              <h2>{{item.name}}</h2><spn>（共 {{item.count}} 题，合计 {{item.totalScore}} 分）</spn>
            </div>
            <el-card class="box-card" v-for="(sub,index) in item.childs" :id="item.code+(index+1)">
              <div slot="header" class="clearfix">
                <el-tag effect="dark"> {{sub.no}} </el-tag>
                <span v-if="!this.disabledUpdate">{{sub.subject}}</span>
                <el-input v-if="this.disabledUpdate" v-model="sub.subject" style="width: 45%"></el-input>
                <span v-if="!this.disabledUpdate">({{sub.totalScore}}分)</span>
                <el-input v-if="this.disabledUpdate" v-model="sub.totalScore" style="width: 5%;margin-left: 5%" label="分值"></el-input>
                <el-button type="primary" style="float: right" v-if="type===3" @click="this.disabledUpdate=!this.disabledUpdate">修改</el-button>
                <el-button type="primary" style="float: right;margin-right: 20px" v-if="type===3&&disabledUpdate"  @click="SubmitUpdate(sub)">确认</el-button>
                <div v-if="type===2" style="float: right; padding: 3px 0">
                  <el-radio-group v-model="sub.isHook">
                    <el-radio-button :disabled="disabledRead" :label="1"  @change.native="isHookButtionCheck(sub)">√</el-radio-button>
                    <el-radio-button :disabled="disabledRead" :label="2"  @change.native="isHookButtionCheck(sub)">×</el-radio-button>
                  </el-radio-group>
                  <div v-if="sub.type===1 ||sub.type===2||sub.type===3" style="display: inline;">
                    <el-input :disabled="true" v-model.number="sub.score" style="width:50px" ></el-input><span>分</span>
                  </div>
                  <div v-else style="display: inline;">
                    <el-input :disabled="disabledRead" v-model="sub.score" style="width:50px" ></el-input><span>分</span>
                  </div>
                </div>
              </div>

              <el-radio-group v-if="sub.type===1" v-model="sub.examineAnswer">
                <el-radio :disabled="disabledAnswer" v-for="o in sub.answers"  :label="o.no" class="answer-radio" @change="answerButtionCheck($event,item,sub)">{{o.no}}.{{o.answer}}</el-radio>
              </el-radio-group>
              <el-checkbox-group v-if="sub.type===2" v-model="sub.examineAnswer">
                <el-checkbox :disabled="disabledAnswer" v-for="o in sub.answers" :label="o.no" class="answer-checkbox" @change="answerButtionCheck($event,item,sub)">{{o.no}}.{{o.answer}}</el-checkbox>
              </el-checkbox-group>
              <el-radio-group v-if="sub.type===3" v-model="sub.examineAnswer">
                <el-radio :disabled="disabledAnswer" label="对" class="answer-radio" @change="answerButtionCheck($event,item,sub)">对</el-radio>
                <el-radio :disabled="disabledAnswer" label="错" class="answer-radio" @change="answerButtionCheck($event,item,sub)">错</el-radio>
              </el-radio-group>
              <el-input :disabled="disabledAnswer"  v-if="sub.type===4" type="textarea" :rows="2"  v-model="sub.examineAnswer" resize="none" maxlength="150" @blur="answerButtionCheck($event,item,sub)"> </el-input>
              <el-input :disabled="disabledAnswer"  v-if="sub.type===5" type="textarea" :rows="10"  v-model="sub.examineAnswer" resize="none" maxlength="2000" @blur="answerButtionCheck($event,item,sub)"> </el-input>
              <div v-if="type!==1" class="subject-remark">
                <div class="item" v-if="type!==3">
                  <span class="title">考生答案：</span>
                  <span>{{converAnswerStr(sub.examineAnswer)}}</span>

                </div>
                <div class="item">
                  <span class="title">正确答案：</span>
                  <span v-if="!disabledUpdate">{{converAnswerStr(sub.correctAnswer)}}</span>
                  <el-input style="width: 40%;" v-if="disabledUpdate" v-model="sub.correctAnswer"></el-input>
                </div>
              </div>
            </el-card>
          </div>
        </div>

        <div class="paper-footer">
          <el-button v-if="type===1" type="success" @click.native="btnClick('handPaper')">交卷</el-button>
          <el-button v-if="type===2" type="success" @click.native="btnClick('readPaper')">自动批改</el-button>
          <el-button v-if="type===2" type="success" @click.native="btnClick('handSubmit')">提交批改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";


export default {
  name: 'ViewTest',

  props: {
    //试卷类型 1 考试，2、批阅，3、查看
    type: {
      type: Number,
      default: 2
    },
    TaskNum:'',
    studentNum:''
  },
  data() {
    return {
      //倒计小时
      hour: '',
      //倒计分钟
      minute: '',
      //倒计秒
      second: '',
      //计时器
      promiseTimer: '',
      //批改答案提交
      correctSubmit:{
        studentNum:this.studentNum,
        result:[],
        taskNum:this.TaskNum,
      },
      //数据源
      tempDataSource: {},
      //答题卡激活项
      answerCardActiveName: [],
      //组装后数据集
      convertDatas: [],
      //禁止答题
      disabledAnswer:false,
      //禁止阅卷
      disabledRead:false,
      //禁止修改
      disabledUpdate:false,
      dataSource: {
            paperId:'1',
            //试卷名称
            paperName: '数学试卷',
            //考生ID
            examineId:'1000',
            //考生名称
            examineName: '胡建平',
            //考试时长
            examDuration: 90,
            score:90,
            //题目集合
            list:[]
      }
    }
  },
  watch: {
    dataSource(newValue, oldValue) {
      Object.assign(this.tempDataSource, newValue)
      this.convertData()
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    hourString () {
      return this.hour < 10 ? '0' + this.hour : '' + this.hour
    },
    minuteString () {
      return this.minute < 10 ? '0' + this.minute : '' + this.minute
    },
    secondString () {
      return this.second < 10 ? '0' + this.second : '' + this.second
    }
  },

  mounted () {
    if(this.type===1)
    {
      let remainTime=this.dataSource.examDuration*60;
      if (remainTime> 0) {
        this.hour = Math.floor((remainTime / 3600) % 24)
        this.minute = Math.floor((remainTime / 60) % 60)
        this.second = Math.floor(remainTime % 60)
        this.countDowm()
      }
    }

    if(this.type===2 || this.type===3)
    {
      this.convertDatas.forEach(t=>{
        t.childs.forEach(c=>{
          this.answerButtionCheck(c.examineAnswer,t,c);
        });
      });
    }

  },
  methods: {
    /**
     * 按钮点击事件
     */
    loadData(){
      if(this.type===2) {
        axios.get('/api/student-item/getStudentItem',
            {params: {TaskNum: this.TaskNum, studentNum: this.studentNum}}
        ).then((res) => {
          let temp;
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].type == 0 || res.data.data[i].type == 1) {
              temp = res.data.data[i].type + 1
            } else {
              temp = res.data.data[i].type + 2
            }

            var obj = {
              type: temp,
              no: i + 1,
              subject: res.data.data[i].content,
              totalScore: res.data.data[i].score,
              answers: [{no: 'A', answer: res.data.data[i].choiceA}, {
                no: 'B',
                answer: res.data.data[i].choiceB
              }, {no: 'C', answer: res.data.data[i].choiceC}, {no: 'D', answer: res.data.data[i].choiceD}],
              correctAnswer: res.data.data[i].ans,
              questID: res.data.data[i].num,
              examineAnswer: res.data.data[i].studentAns,
            }
            this.dataSource.list.push(obj);

            Object.assign(this.tempDataSource, this.dataSource)

            this.convertData()
            if (this.type === 2) {
              this.disabledAnswer = true
            }
            if (this.type === 3) {
              this.disabledAnswer = true
              this.disabledRead = true
            }

          }
        }).catch((error) => {
          console.log(error);
        })
      }
      if(this.type===3){
        axios.get('/api/quest/getQuests',{params:{TaskNum:this.TaskNum}}).then(res=>{
          console.log(res);
          let temp;
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].type == 0 || res.data.data[i].type == 1) {
              temp = res.data.data[i].type + 1
            } else {
              temp = res.data.data[i].type + 2
            }

            var obj = {
              type: temp,
              no: i + 1,
              subject: res.data.data[i].content,
              totalScore: res.data.data[i].score,
              answers: [{no: 'A', answer: res.data.data[i].choiceA}, {no: 'B', answer: res.data.data[i].choiceB},
                {no: 'C', answer: res.data.data[i].choiceC}, {no: 'D', answer: res.data.data[i].choiceD}],
              correctAnswer: res.data.data[i].ans,
              questID: res.data.data[i].num,
            }
            this.dataSource.list.push(obj);

            Object.assign(this.tempDataSource, this.dataSource)

            this.convertData()
            if (this.type === 2) {
              this.disabledAnswer = true
            }
            if (this.type === 3) {
              this.disabledAnswer = true
              this.disabledRead = true
            }

          }
        }).catch(error=>{
          console.log(error);
        })
      }
    }
    ,
    btnClick(type){

      switch (type) {
          //交卷
        case 'handPaper':
          this.$emit('PaperHand',this.tempDataSource)
          break
          //阅卷
        case 'readPaper':
          this.correctPaper();
          break
        case  'handSubmit':
          this.handCorrect();
          break;
      }
    },

    handCorrect(){
      let correctData = JSON.parse(JSON.stringify(this.convertDatas))

      for (let i = 0; i < correctData.length; i++) {
        for (let j = 0; j < correctData[i].childs.length; j++) {
          if(this.convertDatas[i].childs[j].score===undefined){
            this.$message.error("请先完成所有题目批改")
            return false;
          }
        }
      }

      for (let j = 0; j < correctData[correctData.length-1].childs.length; j++) {
        if (this.convertDatas[correctData.length - 1].childs[j].type === 5) {
          var obj = {
            questid: this.convertDatas[correctData.length - 1].childs[j].questID,
            score: parseInt(this.convertDatas[correctData.length - 1].childs[j].score)
          }
          this.correctSubmit.result.push(obj)
        }
      }

      axios.post('/api/student-item/SubmitCorrect',this.correctSubmit).then(res=>{
        this.$message.success("批改成功");
        this.$router.go(-1)

      }).catch(error=>{
        console.log(error);
      })
    },
    correctPaper(){
      let correctData = JSON.parse(JSON.stringify(this.convertDatas))
      console.log(correctData);
      for (let i = 0; i < correctData.length; i++) {
        for (let j = 0; j < correctData[i].childs.length; j++) {
          if (correctData[i].childs[j].type !== 5) {
            if (correctData[i].childs[j].correctAnswer === correctData[i].childs[j].examineAnswer) {
              this.convertDatas[i].childs[j].isHook = 1
              this.convertDatas[i].childs[j].score = this.convertDatas[i].childs[j].totalScore
            } else {
              this.convertDatas[i].childs[j].isHook = 1
              this.convertDatas[i].childs[j].score = 0
            }
            var obj = {
              questid: this.convertDatas[i].childs[j].questID,
              score: this.convertDatas[i].childs[j].score
            }
            this.correctSubmit.result.push(obj)
          }
        }
      }
    },
    /**
     * 锚点定位
     */
    jump(postion) {
      let jump = this.$refs.paperContent.querySelectorAll("#"+postion);
      // 获取需要滚动的距离
      let total = jump[0].offsetTop;
      //实现form锚点定位
      this.$refs.paperContent.scrollTop = jump[0].offsetTop;
    },
    /**
     *对错选择
     */
    isHookButtionCheck(val) {
      console.log(val);
      if(val.type===1 || val.type===2 || val.type===3)
      {
        if(val.isHook===1)
        {
          val.score=val.totalScore;
        }
        if(val.isHook===2)
        {
          val.score=0;
        }
      }
    },
    /**
     *答题卡选中
     */
    answerButtionCheck(value,parent,child){

      let answerId='answer'+parent.code+child.no
      let but = this.$refs.paperLeft.querySelectorAll("#"+answerId);
      if(but.length>0)
      {
        if(but[0].className.indexOf('answer-button-check')>-1)
        {
          if(child.examineAnswer && child.examineAnswer.length==0){
            but[0].classList.remove("answer-button-check");
          }
        }
        else{
          if (child.examineAnswer && child.examineAnswer.length > 0) {
            but[0].classList.add("answer-button-check");
          }

        }

      }
    },
    SubmitUpdate(index){
      console.log(index);
      var obj = {
        num:index.questID,
        score:index.totalScore,
        content:index.subject,
        ans:index.correctAnswer
      }
      axios.post('/api/quest/UpdateQuest',obj).then(res=>{
        this.$message.success("修改成功")
        this.disabledUpdate = !this.disabledUpdate
        for(var key in this.dataSource.list){
          delete this.dataSource.list[key];
        }
        this.loadData()
      }).catch(error=>{
        this.$message.error("修改失败")
      })
    },
    /**
     * 转换答案
     */
    converAnswerStr(answer){
      if(answer instanceof Array)
      {
        return answer.join('  ')
      }
      return  answer
    },
    /**
     * 转换数据
     */
    convertData() {
      let sorted = this.groupBy(this.tempDataSource.list, function(item) {
        return [item.type]
      })

      this.convertDatas = []
      this.answerCardActiveName=[]
      this.orderBy(sorted, 'key', 'asc')
      sorted.forEach(item => {
        let totalScore = 0
        item.value.forEach(t => {
          totalScore += t.totalScore
        })
        switch (item.key) {
          case "[1]":
            this.convertDatas.push({
              name: '单选题',
              code: 'Single',
              count: item.value.length,
              totalScore: totalScore,
              childs:item.value
            })
            this.answerCardActiveName.push('Single')
            break
          case "[2]":
            this.convertDatas.push({
              name: '多选题',
              code: 'Multiple',
              count: item.value.length,
              totalScore: totalScore,
              childs:item.value
            })
            this.answerCardActiveName.push('Multiple')
            break
          case "[3]":
            this.convertDatas.push({
              name: '判断题',
              code: 'Judgment',
              count: item.value.length,
              totalScore: totalScore,
              childs:item.value
            })
            this.answerCardActiveName.push('Judgment')
            break
          case "[4]":
            this.convertDatas.push({
              name: '填空题',
              code: 'Blank',
              count: item.value.length,
              totalScore: totalScore,
              childs:item.value
            })
            this.answerCardActiveName.push('Blank')
            break
          case "[5]":
            this.convertDatas.push({
              name: '简答题',
              code: 'Answer',
              count: item.value.length,
              totalScore: totalScore,
              childs:item.value
            })
            this.answerCardActiveName.push('Answer')
            break
        }

      })
    },
    /**
     * 排序
     * @param {} datas 数组
     * @param {} col 列
     * @param {} type 类型 desc,asc
     * @returns {}
     */
    orderBy(datas, col, type) {
      let m
      for (let i = 0; i < datas.length; i++) {
        for (let k = 0; k < datas.length; k++) {
          if (type === 'asc') {
            if (datas[i][col] < datas[k][col]) {
              m = datas[k]
              datas[k] = datas[i]
              datas[i] = m
            }
          } else if (type === 'desc') {
            if (datas[i][col] > datas[k][col]) {
              m = datas[k]
              datas[k] = datas[i]
              datas[i] = m
            }
          }
        }
      }
      return datas
    },
    /**
     * 分组
     * @param array 数据集
     * @param f 函数
     * let sorted = groupBy(list, function(item){ return [item.name];});
     */
    groupBy(array, f) {

      const groups = {}
      const keyValues = []

      array.forEach(function(o) {
        const group = JSON.stringify(f(o));

        groups[group] = groups[group] || []
        groups[group].push(o)
      })
      Object.keys(groups).map(function(group) {
        return keyValues.push({ key: group, value: groups[group] })
      })
      return keyValues
    },
    /**
     * 倒计时
     */
    countDowm () {
      let self = this
      clearInterval(this.promiseTimer)
      this.promiseTimer = setInterval(function () {
        if(self.hour===0 && self.minute===0 && self.second===0)
        {
          self.disabledAnswer=true;
        }
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0
            self.$emit('countDowmEnd', true)
            clearInterval(self.promiseTimer)
          } else {
            self.second -= 1
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1
            self.minute = 59
            self.second = 59
          } else {
            self.second -= 1
          }
        }
      }, 1000)
    },
  }

}
</script>

<style scoped>
.paper-main {
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden
}

.paper-header {
  width: 100%;
  height: 60px;
  background-color: #f7f7f7;
  position: absolute;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);
}

.paper-left {
  position: absolute;
  padding: 10px;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #e4e4e4;
  border-top: none;
}

.paper-content {
  position: absolute;
  left: 305px;
  top: 60px;
  right: 0px;
  bottom: 45px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #e4e4e4;
  border-top: none;
}

.paper-footer {
  position: absolute;
  padding: 5px 10px;
  left: 305px;
  right: 0;
  bottom: 0px;
  height: 45px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f7f7f7;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
  text-align: center;
}

.paper-title {
  padding-left: 10px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #f7f7f7;
}

.paper-title h1 {
  font-size: 1.2em;
  margin: 0;
}

.downTime{
  color: rgb(230, 93, 110);
  font-size: 16px;
  font-weight: bold;
}
.answer-button{
  padding: 0px;
  color: #0a0a0a;
  background-color: #ffffff;
  border-color: #e4e4e4;
  margin-left: 10px;
  width: 30px;
  height: 30px;
}
.answer-button:hover{
  background: #ecf1ef;
  border-color: #e4e4e4;
  color: #0a0a0a;
}
.answer-button-check{
  background: #b3d7ff;
  border-color: #b8daff;
}

.answer-radio{
  display: list-item;
  margin: 5px 0px;
  margin-right: 50px;
  white-space: pre-line
}

.answer-checkbox{
  display: list-item;
  margin: 5px 0px;
}

.subject-title{
  padding-left: 10px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #f7f7f7;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
}
.subject-title h2{
  font-size: 16px;
  display: inline-block;
}
.subject-title span {
  font-size: 16px;
  display: inline-block;
}

.subject-remark{
  background: #f7f7f7;
}
.subject-remark .item{
  display: block;
  padding: 5px;
}
.subject-remark .title{
  font-weight: bold;
}
.el-radio>>>.el-radio__input.is-checked .el-radio__inner {
  background-color: #13ce66;
  border-color: #13ce66;
}

.el-radio-button>>>.el-radio-button__inner {
  padding: 10px;
}

.el-collapse-item h2 {
  width: 150px;
  font-size: 14px;
  display: inline-block;
}
.el-form--label-top >>> .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0px;
}

.el-card{
  margin: 10px;
}

.el-card >>>.el-card__header {
  background-color: #ffffff;
  padding: 0px 10px;
  line-height: 35px;
  font-size: 16px;
}
.el-card >>>.el-card__body {
  padding: 5px 20px;
}
</style>

